<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>Document</title>
    <style>
    .alert{
        background-color: yellow;
        margin: 10px;
    }
    </style> 
</head>
<body>
    <h1> 插槽 </h1>
    <div id="app">
        <alert-box>
          态度绝对一切  
        </alert-box>

        <alert-box>
            删除数据失败
            <img width="80"  src='../img/1.png'/>
            <button v-on:click="test">haha</button>
        </alert-box>
    </div>
</body>
<script>
// alert组件  --子
Vue.component('alert-box',{
    template:`<div class='alert'>
            <h2>错误消息</h2>
            <slot>默认消息</slot>
        </div>`
    
}); 

var vm = new Vue({
    el: "#app",
    methods:{
        test(){
            alert('haha ');
        }   
    }
});
</script>
</html>